import React, {Component, } from 'react';

require('./css/frame.css');

export default class P27 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      index: [1, 0],
      flag: 'none',
      tipflag:[0,0],
      divflag:['none']
    };
  }

  onSlider(i) {
    let index = [0, 0];
    index[i] = 1;
    this.setState({
      index
    });
  }

  onOver(i) {
    let tipflag = [0, 0];
    tipflag[i] = 1;
    this.setState({
      tipflag
    });
  }

  onOut(i) {
    this.setState({
      tipflag:[0,0]
    });
  }


  onClick(){

  }

  render() {
    const {index, tipflag} = this.state;
    return (
      <div id="page">
        <div className="content" id="box27">
          <h4 className="title">信息娱乐系统- APP Connect </h4>

          {index[0] === 1 && <div className='box27Cont' id='box270'>
            <img src={require('./img/27_0.jpg')} style={{ position:'absolute',left:420,top:30}}/>
            <p style={{marginTop:10}}>App-Connect 为您提供了四个接口，<br></br>
              用于连接智能机和信息娱乐系统：</p>
            <ul>
                <li>Apple CarPlay 适用于苹果手机。要确保手机系统是IOS 8.0以上版本且必须激活Siri
                  并确保手机中的应用是苹果公司授权的应用程序。</li>
                <li>MirrorLink 据了解目前支持这一功能的厂商只有HTC、三星和索尼的部分型号手机。</li>
                <li>Android Auto 是由谷歌公司开发，需要一部安卓5.0以上版本的智能手机；手机中安装的是谷歌公司授权的应用程序。</li>
                <li>Baidu Carlife支持Android和iOS双操作系统，能够覆盖到95%以上的智能手机用户。（注：现阶段还不能在苹果手机上使用此功能。）</li>
            </ul>
            <p>连接后，可以在信息娱乐系统的显示屏上显示智能手机的屏幕内容。</p>

          </div>}

          {index[1] === 1 && <div className='box27Cont' id='box271'>
            <p style={{marginTop:10}}>连接后，可以在信息娱乐系统的显示屏上显示智能手机的屏幕内容。</p>

            <img src={require('./img/27_1.jpg')} style={{ position:'absolute',left:320,top:150}}/>

            <img
              src={require("./img/red0.png")}
              className="circle"
              style={{left:405,top:206}}
              onClick={this.onClick.bind(this,0)}
              onMouseOver={this.onOver.bind(this,0)}
              onMouseOut={this.onOut.bind(this,0)}
            />

            <img
              src={require('./img/red0.png')}
              className="circle"
              style={{left: 495, top: 386}}
              onClick={this.onClick.bind(this,1)}
              onMouseOver={this.onOver.bind(this,1)}
              onMouseOut={this.onOut.bind(this,1)}
            />



            {tipflag[0]===1&& <div id="box2710" style={{left:430,top:125 }} >
              <img  src={require('./img/27_3.jpg')} />
              <p>前排一个USB接口具备APP，connect功能。</p>
            </div>}

            {tipflag[1]===1 &&<div id="box2711" style={{left:120,top:220 }} >
              <img  src={require('./img/27_4.jpg')} />
              <p  style={{width:194}}>后排两个USB接口无APP，connect功能。</p>
            </div>}

          {/*  {tipflag[0]===1 &&<Tip
              word='前排一个USB接口具备APP，connect功能'
              src='27_3.jpg'
              x='320'
              y='10'
            />}

            {tipflag[1]===1 &&<Tip
              word='后排两个USB接口无APP，connect功能'
              src='27_4.jpg'
              x='410'
              y='185'
            />}*/}

          </div>}

          <div id="csld" className="sldcir" style={{left: 440}}>
            {index.map((item, i) => {
              let sr = (item === 1 ? 'son' : 'soff');
              return (
                <img key={i} src={require('./img/' + sr + '.png')} onClick={this.onSlider.bind(this, i)}/>);
            })}
          </div>

        </div>
      </div>
    );
  }
}

const Tip=(props)=>{
  return (
  <div  id="stip" style={{left:props.x+'px', top:props.y+'px'}}>
    <span id="bot"></span>
    <div>
      <img  src={require('./img/'+props.src+'')} />
      <p>{props.word}</p>
    </div>
  </div>
  )
}


